<template>
  <!-- 服务管理 -->
  <div class="innerPageTable-box-OneTwo value-set-list-wrap innerPageTable-out-flex">
    <!-- 搜索区域 -->
    <SelfAdaption>
      <Form
        :model="searchForm"
        ref="serviceForm"
        slot="adaption-bar"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <Form-item prop="title" :label="'表单名称:'">
          <Input type="text" clearable v-model.trim="searchForm.title" :placeholder="'请输入'" @on-enter="searchValueSet"></Input>
        </Form-item>
        <Form-item prop="period" :label="'当前填报周期:'">
          <div style="display: flex;gap: 20px;">
            <DatePicker type="year" :value="searchForm.year" transfer :clearable="true" @on-change="handleChange"></DatePicker>
            <Cascader :data="periodList" v-model="searchForm.period" transfer></Cascader>
          </div>
        </Form-item>

        <!-- 查询\重置按钮 -->
        <Form-item prop="button" class="search-solt-btn">
          <RPButton optType="search" ref="search" @click="searchValueSet()" />
          <RPButton btnType="default" text="重置" @click="handleReset" />
        </Form-item>
      </Form>
    </SelfAdaption>
    <InnerPageTable ref="valueSetTable" :config="pageTableConfig"> </InnerPageTable>
  </div>
</template>

<script>
import MenuComp from '@/views/menuList/rating/index.vue'
import RateForm from '@/views/formCenter/writeForm/rateForm/index.vue'
import { FORM_TYPES, TODO_TYPE, FORM_STATUS } from '@/views/formConst/index.js'
import readApi from '@/api/read.js'
import formCenterApi from '@/api/formCenter'
import { readColumns, periodList } from './const'
import { mapState } from 'vuex'

export default {
  name: 'read',
  data() {
    return {
      searchForm: {
        title: '',
        period: [],
        year: ''
      },
      periodList: periodList,
      pageTableConfig: {
        loadDataFn: this.getServiceList.bind(this),
        columns: readColumns.bind(this)(),
        autoFirst: false //默认 就是 false, 要配置在这里
      }
    }
  },
  mounted() {
    this.searchValueSet()
  },
  computed: {
    ...mapState(['menuList']),
    periodTag() {
      if (!this.searchForm.year) {
        return ''
      } else if (this.searchForm.period.length !==2 && this.searchForm.year) {
        return this.searchForm.year
      } else {
        return this.searchForm.year + '-' + this.searchForm.period[1]
      }
    }
  },
  methods: {
    async goDetail(row) {
      if (row.formType == FORM_TYPES['RATE'] && row.todoType == TODO_TYPE['WRITE']) {
        new this.$sidelipPage(
          RateForm,
          {
            props: {
              isDetail: true,
              row: {
                id: row.formId,
                recordId: row.recordId,
              }
            }
          }
        )
      } else if (row.formType == FORM_TYPES['RATE'] && row.todoType == TODO_TYPE['APPROVAL']) {
        const res = await formCenterApi.parentMenuPermission([row.formMenu])
          const permission = res.data.data[0].permission
          // 跳转去晋级
          new this.$sidelipPage(
            MenuComp,
            {
              props: {
                row: {
                  value: row.formMenu,
                  data: {
                    menu: row.formMenu,
                    permission,
                  }
                },
                onlyView: true
              }
            },
            data => {
              data && this.searchValueSet()
            }
          )
      } else if (
        row.formType == FORM_TYPES['APPLY'] ||
        (row.formType == FORM_TYPES['RATE'] && row.todoType == TODO_TYPE['CREATE'])
      ) {
        readApi.getProcessUrl({ processInstId: row.processId, taskInstId: row.taskId }).then(res => {
          window.open(res.data.data)
        })
      }
      // if (row.formType === 3) {

      // } else {
      //   readApi.getProcessUrl({ processInstId: row.processId, taskInstId: row.taskId }).then(res => {
      //     window.open(res.data.data)
      //   })
      // }
    },
    getServiceList(tableObj) {
      let { responseProcess, param } = tableObj
      let { pageNum, pageSize, title } = param
      // readState: false, //bool已读true,未读false
      // state: 1, //inter待办0,已办1
      readApi
        .getBpmpApprovalPage({
          title,
          period: this.periodTag,
          readState: true,
          currentPage: pageNum,
          pageSize
        })
        .then(res => {
          let { current, records, pages, total } = res.data.data
          responseProcess({
            pageNum,
            size: current,
            pages,
            records: records || [],
            total
          })
        })
    },
    //搜索
    searchValueSet() {
      this.$refs['valueSetTable'].load(this.searchForm)
    },
    handleChange(date) {
      this.searchForm.year = date
    },
    handleReset() {
      this.$refs['serviceForm'].resetFields()
      this.searchForm.year = ''
      this.searchValueSet()
    },
  },
  directives: {}
}
</script>
<style lang="less" scoped>
/deep/.table-bar button:last-child {
  color: #ffffff;
  background-color: #ff6f4b;
  border-color: #ff6f4b;
}
/deep/ .self-adaption-wrap .self-adaption-flex {
  margin-bottom: 0px;
}
</style>
